/*
 * @Description: 
 * @Project: 
 * @Author: michelle
 * @Date: 2022-03-01 18:21:29
 * @LastEditors: michelle
 * @LastEditTime: 2022-03-02 10:39:26
 * @Modified By: michelle
 * @FilePath: /trunkverse/src/components/selectable/index.jsx
 */
import React, { useCallback, useEffect, useRef, useState } from 'react'
import './index.less'
import Selectable from 'selectable.js'

export default function Selectables(param) {

    const mainRef = useRef(null);
    useEffect(() => {
        console.log('param',param)
        //  const timer = setTimeout(() => {
        if (document.querySelectorAll('.box').length) {
            const container = document.getElementById("main");
            const selectable = new Selectable({
                filter: '.box', //可选择的元素节点
                appendTo: mainRef.current, //追加到父容器
                saveState: true,
                ignore: "", // 忽视的元素节点
                autoScroll: { //滚动位置
                    threshold: 0,
                    increment: 15,
                },
                lasso: { //框选的样式
                    borderColor: "rgba(255, 255, 255, 1)",
                    backgroundColor: "rgba(255, 255, 255, 0.1)",
                },
                // selected: "ui-selected", //选中类名
                // container: "ui-container", //父容器类名
                // selecting: "ui-selecting", // 鼠标移上去类名
                // selectable: "ui-selectable", // 默认类名
                // unselecting: "ui-unselecting", //选中类名
            });
            console.log('selectable', selectable)
            //选中全部元素
            //selectable.selectAll()
            //取消选中所有元素
            // selectable.clear()
            // //选中单个元素 index
            // selectable.select(1);
            // //取消选中单个元素
            // selectable.deselect(1)
            // //获取选中项
            // console.log(5, selectable.getSelectedItems())
            // //获取选中的node节点
            // console.log(6, selectable.getSelectedNodes())
            //监听选中元素
            selectable.on("selecteditem", (item) => {
                console.log(item, selectable)
            });

            return () => {
                // clearTimeout(timer);
                selectable.destroy()
            };

        }
        // }, 0)

        //追加元素创建 
        // const frag = document.createDocumentFragment();
        // for (let i = 0; i < 50; i++ ) {
        //     const div = document.createElement("div");
        //     div.className = "btn btn-secondary mr-2 mb-2 btn-selectable box";   
        //     div.textContent = i+1;         
        //     frag.appendChild(div);
        // }
        // container.appendChild(frag);
        // selectable.add(container.children);
       

    }, [param.data]);

    return (
        <div className='main' id="main" ref={mainRef}>
            {
                param.data && param.data.map(item => {
                    return (
                        <div className='box' key={item}>
                            <img src="https://joeschmoe.io/api/v1/random" alt="" className='img-thumbnail'/>
                        </div>
                    )
                })
            }
        </div>
    )
}
